'use client';

import { useState, useEffect } from 'react';
import styled from 'styled-components';

// 样式组件
const DroneContainer = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
`;

const DroneStatsRow = styled.div`
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
`;

const StatCard = styled.div`
  flex: 1;
  padding: 12px;
  background: rgba(13, 41, 77, 0.5);
  border: 1px solid rgba(24, 144, 255, 0.3);
  border-radius: 4px;
  margin: 0 5px;
  position: relative;
  overflow: hidden;
  
  &:first-child {
    margin-left: 0;
  }
  
  &:last-child {
    margin-right: 0;
  }
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(24, 144, 255, 0.8), transparent);
  }
`;

const StatTitle = styled.div`
  font-size: 12px;
  color: rgba(160, 207, 255, 0.8);
  margin-bottom: 5px;
`;

const StatValue = styled.div`
  font-size: 22px;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 10px rgba(24, 144, 255, 0.5);
`;

// 无人机数据定义
interface DroneData {
  police: {
    total: number;
    online: number;
    offline: number;
  };
  civilian: {
    total: number;
    online: number;
    offline: number;
  };
  unidentified: {
    total: number;
    online: number;
    offline: number;
  };
}

export default function DroneMonitoring() {
  // 状态管理
  const [droneData, setDroneData] = useState<DroneData>({
    police: { total: 28, online: 26, offline: 2 },
    civilian: { total: 45, online: 41, offline: 4 },
    unidentified: { total: 12, online: 11, offline: 1 }
  });
  
  // 计算总数
  const totalDrones = droneData.police.total + droneData.civilian.total + droneData.unidentified.total;
  const onlineDrones = droneData.police.online + droneData.civilian.online + droneData.unidentified.online;
  
  // 计算在线率
  const onlineRate = Math.round((onlineDrones / totalDrones) * 100);
  
  // 数据更新
  useEffect(() => {
    // 模拟数据更新
    const updateTimer = setInterval(() => {
      // 随机更新无人机数据
      const newDroneData = {...droneData};
      
      // 随机变化政务无人机数据
      const policeChange = Math.floor(Math.random() * 3) - 1; // -1, 0, 或 1
      if (newDroneData.police.offline + policeChange >= 0 && newDroneData.police.offline + policeChange <= newDroneData.police.total) {
        newDroneData.police.offline += policeChange;
        newDroneData.police.online = newDroneData.police.total - newDroneData.police.offline;
      }
      
      // 随机变化企业无人机数据
      const civilianChange = Math.floor(Math.random() * 3) - 1;
      if (newDroneData.civilian.offline + civilianChange >= 0 && newDroneData.civilian.offline + civilianChange <= newDroneData.civilian.total) {
        newDroneData.civilian.offline += civilianChange;
        newDroneData.civilian.online = newDroneData.civilian.total - newDroneData.civilian.offline;
      }
      
      // 随机变化公众无人机数据
      const unidentifiedChange = Math.floor(Math.random() * 3) - 1;
      if (newDroneData.unidentified.offline + unidentifiedChange >= 0 && newDroneData.unidentified.offline + unidentifiedChange <= newDroneData.unidentified.total) {
        newDroneData.unidentified.offline += unidentifiedChange;
        newDroneData.unidentified.online = newDroneData.unidentified.total - newDroneData.unidentified.offline;
      }
      
      setDroneData(newDroneData);
    }, 3000);
    
    return () => {
      clearInterval(updateTimer);
    };
  }, [droneData]);

  return (
    <DroneContainer>
      <DroneStatsRow>
        <StatCard>
          <StatTitle>政务无人机</StatTitle>
          <StatValue>{droneData.police.total}</StatValue>
        </StatCard>
        <StatCard>
          <StatTitle>企业无人机</StatTitle>
          <StatValue>{droneData.civilian.total}</StatValue>
        </StatCard>
        <StatCard>
          <StatTitle>公众无人机</StatTitle>
          <StatValue>{droneData.unidentified.total}</StatValue>
        </StatCard>
      </DroneStatsRow>
      
      <DroneStatsRow>
        <StatCard>
          <StatTitle>登记总数量</StatTitle>
          <StatValue>{totalDrones}</StatValue>
        </StatCard>
        <StatCard>
          <StatTitle>在线数量</StatTitle>
          <StatValue>{onlineDrones}</StatValue>
        </StatCard>
        <StatCard>
          <StatTitle>在线率</StatTitle>
          <StatValue style={{ color: '#52c41a' }}>
            {onlineRate}%
          </StatValue>
        </StatCard>
      </DroneStatsRow>
    </DroneContainer>
  );
}